// import WMap from '../map';
const head = document.querySelector('#head')
const bodyChildren = document.querySelector('#body').children;
const dzCount = document.querySelector('.dz-count');
const heart = document.querySelector('#heart')
const checkbox = document.querySelector('#checkbox')
const getLike = async() => {
	const res = await fetch(`http://1.95.157.217/api/map/getLikeCount`, {
		method: 'GET'
	}).then(response => {
		if (!response.ok) {
				throw new Error(`HTTP error! status: ${response.status}`);
		}
		return response.json();
})
	if (res.code === 0) {
		dzCount.innerText = res.data;
	}
}
const sendLike = async() => {
	await fetch('http://1.95.157.217/api/map/sendLike', {
		method: 'POST',
		body: JSON.stringify({
      page_from: 'mapDemo'
    }),
    headers: {
      'Content-Type': 'application/json'
    }
	}).then(response => {
		if (!response.ok) {
				throw new Error(`HTTP error! status: ${response.status}`);
		}
	})
}
const sendSee = async() => {
	const res = await fetch('http://1.95.157.217/api/map/sendSee', {
		method: 'POST',
    body: JSON.stringify({
      page_from: 'mapDemo'
    }),
    headers: {
      'Content-Type': 'application/json'
    }
	})
}
// 原生实现tab切换
head.addEventListener('click', (e) => {
	const clickedElement = e.target;
	if (clickedElement.parentElement === head && clickedElement.classList.contains('item')) {
		// 顶部栏切换效果
		Array.from(head.children).forEach(item => {
			if (clickedElement !== item) {
				item.classList.remove('active')
			}
		})
		if (!clickedElement.classList.contains('active')) {
			clickedElement.classList.add('active')
		} else {
			clickedElement.classList.remove('active')
		}
		// 底部栏切换效果
		const beClickId = clickedElement.getAttribute('id').split('-')[1]
		Array.from(bodyChildren).forEach((item, index) => {
			item.classList.remove('active')
		})
		bodyChildren[beClickId].classList.add('active')
		if (beClickId === '1') {
			map.updateSize()
		}
	}
})
const map = new WMap.Map('map', {
	center: new WMap.LngLat(116.397428, 39.90923), //地图中心- 北京
	zoom: 5, //地图缩放层级
	minZoom: 0, // 最小可缩放层级
	maxZoom: 18, // 最大可缩放层级
	doubleClickZoom: true, // 是否双击放大
	zoomShow: true, // 是否显示缩放控件
	rotateShow: true, // 是否显示旋转复位控件
	fullScreen: true, // 是否显示全屏控件
	maxExtent: true, // 是否限制地图可拖动范围 - 关联 mouseMoveExtent
	mouseMoveExtent: [
		[10.571664, 0.747024],
		[177.916617, 89.028265]
	]
})
map.on('complete', function () {
	// 地图图块加载完成后触发
	console.log('map：complete-----')
})

map.on('click', e => {
	console.log(e.lngLat)
})

map.on('moveend', e => {
  console.log(e.target.getView().getZoom());
})

map.on('zoom', e => {
  console.log(e);
})

getLike()
sendSee()
heart.addEventListener('click', async() => {
	if (!checkbox.checked) {
		await sendLike()
		await getLike()
	}
})
